<template>
	<!-- 
	详情
 -->
	<view class="centent">
		<view class="big-image">
			<image style="width: 100vw; height: 75vh" :src="particularsList.imageUrl" mode="aspectFill" />
		</view>
		<view class="title">
			<view class="title-name">
				<view class="title-block" v-if="particularsList.auctionState == 0"> 待预展 </view>
				<view class="title-block-green" v-if="particularsList.auctionState == 1"> 预展中 </view>
				<view class="title-text"> {{particularsList.title }}</view>
			</view>
			<!-- <view class="title-info">	
				<view style="display: flex" class="title-info-text">
					<view style="margin-right: 40rpx">专场保证金: JPY{{particularsList.earnestMoney}}</view>
				</view>
				<view class="title-info-text">出场次数: {{particularsList.bidNum}}</view>
			</view> -->
		</view>

		<view class="times">
			<view class="times-info">
				<view style="color: #999; margin-right: 20rpx">预展时间</view>
				<view style="color: #666">{{$u.timeFormat(particularsList.startTime, 'yyyy-mm-dd')}} --
					{{$u.timeFormat(particularsList.previewTime, 'yyyy-mm-dd')}}
				</view>
			</view>
			<view class="times-info">
				<view style="color: #999; margin-right: 20rpx">展出时间</view>
				<view style="color: #666">{{$u.timeFormat(particularsList.auctionTime, 'yyyy-mm-dd  hh:MM:ss')}}</view>
			</view>
		</view>

		<view class="tabs">
			<view class="tabs-text">
				展品<text>{{particularsList.auctionNum}}</text>
			</view>
			<!-- <u-tabs :list="progressList" :current="index" scrollable="false" lineWidth="50" lineColor="#222" :activeStyle="{
          color: '#333',
          transform: 'scale(1.05)',
        }" :inactiveStyle="{
          color: '#999',
          transform: 'scale(1)',
        }" itemStyle="padding-left: 340rpx; padding-right: 340rpx; height: 50px;" @click="onTabs">
			</u-tabs> -->
		</view>

		<!-- 拍品列表 -->
		<AuctionItems v-if="index == 0 && particularsId"  :particularsId="particularsId" />

		<!-- 固定按钮 -->
		<Anchor />

		<!-- 收藏 -->
		<Collect />
	</view>
</template>

<script>
	import Anchor from "../components/anchor.vue";
	import AuctionItems from "../components/auctionItems.vue";
	import Collect from './components/collect.vue';
	export default {
		components: {
			Anchor,
			AuctionItems,
			Collect
		},
		data() {
			return {
				// progressList: [{
				// 		name: "展品",
				// 		badge: {
				// 			value: 5,
				// 		}
				// 	},
				// {
				// 	name: "专场介绍",
				// },
				// ],
				index: 0,
				particularsList: null,
				particularsId:''
			};
		},
		onLoad(option) {
			this.particularsList = JSON.parse(decodeURIComponent(option.item))
			this.particularsId = this.particularsList.auctionId
		},
		methods: {
			onTabs(item) {
				this.index = item.index;
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 500) { //当距离大于600时显示回到顶部按钮
					this.vm.$emit("customEvent", 1)
				} else { //当距离小于600时隐藏回到顶部按钮
					this.vm.$emit("customEvent", 0)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.centent {
		background-color: #f8f8f8;

		.tabs {
			background-color: #fff;

			.tabs-text {
				text-align: center;
				padding-top: 20rpx;

				text {
					font-size: 22rpx;
					margin-left: 10rpx;
					color: #666;
				}
			}

			/deep/ .u-tabs__wrapper__nav__line {
				height: 5rpx !important;
			}
		}

		.title {
			background-color: #fff;
			height: 100rpx;
			padding: 20rpx 30rpx;

			.title-name {
				display: flex;
				align-items: center;

				.title-block {
					background-color: #3b83f6;
					padding: 4rpx;
					color: #eef4ff;
					font-size: 28rpx;
					margin-right: 10rpx;
				}

				.title-block-green {
					background-color: #5ba491;
					padding: 4rpx;
					color: #eef4ff;
					font-size: 28rpx;
					margin-right: 10rpx;
				}

				.title-text {
					font-size: 42rpx;
				}
			}

			.title-info {
				padding-top: 40rpx;

				.title-info-text {
					margin-bottom: 20rpx;
					color: #333;
				}
			}
		}

		.times {
			margin: 20rpx 0;
			background-color: #fff;
			height: 140rpx;
			padding: 20rpx 30rpx;

			.times-info {
				padding: 10rpx 0rpx;
				display: flex;
				font-size: 28rpx;
			}
		}

	}
</style>
